<template>
    <el-row :gutter="24" class="devices-container">
        <el-col :span="8">
            <div>
                <panel-title>烹饪设备</panel-title>
                <el-table :data="cookEquipment" stripe>
                    <el-table-column type="index" label="序号" width="80" :class-name="'txt-center'"></el-table-column>

                    <el-table-column prop="deviceName" label="设备名称" :class-name="'txt-center'"></el-table-column>

                    <el-table-column label="设备状态" :class-name="'txt-center'">
                        <template slot-scope="scope">
                            <span :class="scope.row.stateClass">{{scope.row.stateName}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="冷柜状态" :class-name="'txt-center'">
                        <template slot-scope="scope">
                            <span :class="scope.row.coldData.stateClass">{{scope.row.coldData.stateName}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>

        <el-col :span="8">
            <div>
                <panel-title>保温柜</panel-title>

                <el-table :data="bwcData" stripe>
                    <el-table-column type="index" label="序号" width="80" :class-name="'txt-center'"></el-table-column>

                    <el-table-column prop="id" label="设备名称" :class-name="'txt-center'">
                        <template slot-scope="scope">
                            <span>{{scope.row.deviceName}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="num" label="设备状态" :class-name="'txt-center'">
                        <template slot-scope="scope">
                            <span :class="scope.row.stateClass">{{scope.row.stateName}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>

        <el-col :span="8">
            <div>
                <panel-title>物流线和取餐口</panel-title>
                <el-table :data="otherEquipment" stripe>
                    <el-table-column type="index" label="序号" width="80" :class-name="'txt-center'"></el-table-column>

                    <el-table-column prop="deviceName" label="设备名称" :class-name="'txt-center'"></el-table-column>

                    <el-table-column label="设备状态" :class-name="'txt-center'">
                        <template slot-scope="scope">
                            <span :class="scope.row.stateClass">{{scope.row.stateName}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import PanelTitle from '@/components/title.vue'
    import RatioBar from '@/components/ratioBar.vue'
    import {getAllEquipmentData} from '@/api'

    export default {
        name: 'ThermotankStatus',
        components: {PanelTitle, RatioBar},
        props: {
            listBwc: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        computed: {
            bwcData() {
                this.listBwc.forEach(item => {
                    this.setDeviceState(item)
                });
                return this.listBwc
            },
        },
        data() {
            return {
                cookEquipment: [],
                otherEquipment: [],
                cookEquError: {
                    cke_1: '正常',
                    cke_2: '异常'
                },
                cookEquState: {
                    cks_1: '待机',
                    cks_2: '烹饪中'
                },
                coldState: {
                    cs_1: '正常',
                    cs_2: '异常'
                },
                deviceStatus: {
                    device_1: '手动',
                    device_2_1_1: '空闲',
                    device_2_1: '自动-运行',
                    device_2_2: '异常'
                },
                tableData: [{
                    date: '#8',
                    name: '王小虎',
                    address: '1000',
                    tets: ''
                }]
            }
        },
        mounted() {
            let _t = this.tableData[0]

            for (let i = 0; i < 3; i++) {
                this.tableData.push(_t)
            }
            this.init()
        },
        methods: {
            async init() {
                const Equipment = await getAllEquipmentData()
                const {data: {cookEquipment, otherEquipment}} = Equipment || {data: {}}
                if (cookEquipment && otherEquipment) {
                    // 烹饪设备
                    this.cookEquipment = [];
                    cookEquipment.forEach((item, index) => {
                        if (!item.coldData) {
                            this.cookEquipment.splice(index, 1)
                        } else {
                            if (item.ctrlMode === 1) {
                                item.stateName = '手动';
                                item.stateClass = '';
                            } else if (item.error === 2) {
                                item.stateName = '异常';
                                item.stateClass = 'fs-er';
                            } else if (item.state === 1) {
                                item.stateName = '自动-空闲';
                                item.stateClass = 'fs-blue';
                            } else {
                                item.stateName = '自动-运行';
                                item.stateClass = 'fs-green';
                            }
                            this.setDeviceState(item.coldData);
                            this.cookEquipment.push(item);
                        }
                    });
                    // 其他设备
                    this.otherEquipment = [];
                    otherEquipment.forEach(item => {
                        this.setDeviceState(item);
                        this.otherEquipment.push(item);
                    })
                }
                this.initTime = setTimeout(() => {
                    this.init()
                }, 5000)
            },
            setDeviceState(item) {
                if (item.ctrlMode === 1) {
                    item.stateName = '手动';
                    item.stateClass = '';
                } else if (item.state === 1) {
                    item.stateName = '自动-运行';
                    item.stateClass = 'fs-green';
                } else {
                    item.stateName = '异常';
                    item.stateClass = 'fs-er';
                }
            }

        },
        destroyed() {
            clearTimeout(this.initTime)
        }
    }
</script>

<style lang="less">
    .devices-container {

        .el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
            padding-right: 4px;
            padding-left: 4px;
            line-height: 46px;
            height: 46px;
        }

        .el-table th, .el-table tr {
            background: none;
            font-size: 18px;
            font-weight: normal;

            & > td {
                border-bottom: 1px solid rgba(255, 255, 255, .1);
            }
        }
    }
</style>
